<template>
  <base-layout>
    <template #searchPanel>
      <search-panel
        v-slot="{ form }"
        :addPer="'brandStyle:create'"
        :selectPer="'brandStyle:page'"
        addTitle="新增属性"
        @insert="add"
        @search="search"
        :showSearchButton="true"
        :showAddButton="true"
      >
        <el-select
          clearable
          style="width: 200px"
          v-model="form.categoryId"
          placeholder="精品类别"
        >
          <el-option
            v-for="item in getOneCat"
            :key="item.index"
            :value="item.id"
            :label="item.largeName"
          />
        </el-select>
        <el-input
          v-model="form.styleName"
          clearable
          placeholder="属性名称"
          style="width: 200px"
        />
      </search-panel>
    </template>
    <template #contentPanel>
      <data-table
        :value="tableData"
        :total-count="totalCount"
        :has-action="true"
        :table-column-attributes="tableColumnAttributes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :width="160"
      >
        <template #action="{ row }">
          <i
            class="el-icon-edit"
            title="修改"
            style="margin-left: 15px; cursor: pointer"
            v-permission="'brandStyle:update'"
            @click="updateUser(row,'edit')"
          ></i>
          <i
            class="el-icon-delete"
            title="删除"
            style="color: red; margin-left: 20px; cursor: pointer"
            v-permission="'brandStyle:delete'"
            @click="handleDataDelete(row)"
          ></i>
        </template>
      </data-table>
      <el-dialog
        :title="title+'属性'"
        :visible.sync="visible"
        width="40%">
        <el-form :model="addForm" label-width="100px" ref="addForm" :rules="rules">
          <el-row>
            <el-col :span="12">
              <el-form-item label="精品类别:" prop="categoryId">
                <el-select
                  class="w-100"
                  clearable
                  v-model="addForm.categoryId"
                  placeholder="精品类别"
                >
                  <el-option
                    v-for="item in getOneCat"
                    :key="item.index"
                    :value="item.id"
                    :label="item.largeName"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="属性名称:" prop="styleName">
                <el-input v-model="addForm.styleName" clearable placeholder="请输入属性名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="顺序:" prop="seq">
                <el-input v-model="addForm.seq" clearable placeholder="请输入顺序"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属门店:" prop="storeId">
                <el-select
                  class="w-100"
                  clearable
                  v-model="addForm.storeId"
                  placeholder="所属门店"
                >
                  <el-option
                    v-for="item in stores"
                    :key="item.id"
                    :value="item.id"
                    :label="item.storeName"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">属性选项</el-col>
          </el-row>
          <el-divider content-position="center"></el-divider>
          <el-row v-for="(item,index) in addForm.optionList" :key="index">
            <el-col :span="12">
              <el-form-item label="名称:"
                            :prop="`optionList.${index}.name`"
                            :rules="{required: true,message: '名称不能为空',trigger: 'blur'}"
              >
                <el-input v-model="item.name" clearable placeholder="请输入名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="顺序:" prop="seq">
                <el-input v-model="item.seq" clearable placeholder="请输入顺序"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="" label-width="30px">
                <el-button v-if="index===0" type="success" @click="handleOkList">添加</el-button>
                <el-button v-else type="danger" @click="handleCloseList(index)">删除</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
         <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleOk">确 定</el-button>
        </span>
      </el-dialog>
    </template>
  </base-layout>
</template>
<script>
import baseMixin from '@/mixins/base'
import {
  getList,
  save,
  deleteById,
  update
} from '@/api/pre-sale/qualityManagement/property'
import { getDict } from '@/utils'
import { mapGetters } from 'vuex'
import { getTwoCat } from '@/api/pre-sale/qualityManagement/category'

export default {
  mixins: [
    baseMixin({
      idName: 'id',
      findData: getList,
      updateData: update,
      deleteData: deleteById,
      dataName: ['content', 'totalRecords']
      // format(res) {
      //   return res.map((data) => {
      //     data.statusName = data.status === true ? '启用' : '禁用'
      //     return data
      //   })
      // }
    })
  ],
  computed: {
    ...mapGetters(['stores', 'storesCalue'])
  },
  data() {
    return {
      title: '',
      visible: false,
      getOneCat: [],
      addForm: {
        categoryId: '',
        styleName: '',
        storeId: '',
        seq: '',
        optionList: [{
          name: '',
          seq: ''
        }]
      },
      getDict: getDict,
      form: {
        client: '' // 客户信息
      },
      tableColumnAttributes: [
        {
          name: '归属门店',
          value: 'storeName',
          type: 'text'
        },
        {
          name: '精品类别',
          value: 'largeName',
          type: 'text'
        },
        {
          name: '属性名称',
          value: 'styleName',
          type: 'text'
        },
        {
          name: '属性选项',
          value: 'name',
          type: 'text'
        },
        {
          name: '上次修改人',
          value: 'updateUser',
          type: 'text'
        },
        {
          name: '上次修改时间',
          value: 'updateTime',
          type: 'text'
        }
      ],
      dict: {},
      rules: {
        categoryId: [
          { required: true, message: '请选择精品类别', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 编辑员工信息
    updateUser(row) {
      this.title = '编辑'
      this.visible = true
      this.addForm = {
        ...row
      }
    },
    // 查询
    search(form) {
      this.searchOptions = form
      this.currentPage = 1
      this.setTableData()
    },
    // 新增
    add() {
      this.title = '新增'
      this.visible = true
      this.reset()
    },

    // 取消
    handleClose() {
      this.reset()
      this.search()
      this.visible = false
    },
    // 确认
    handleOk() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          if (this.title === '新增') {
            this.save()
          } else {
            this.update()
          }
        }
      })
    },
    // 新增接口
    async save() {
      await save({ ...this.addForm }).then((res) => {
        const { success } = res
        if (success) {
          this.search()
          this.visible = false
          this.reset()
        }
      })
    },
    // 编辑接口
    async update() {
      await update({ ...this.addForm }).then((res) => {
        const { success } = res
        if (success) {
          this.search()
          this.visible = false
          this.reset()
        }
      })
    },
    // t弹窗新增属性选项
    handleOkList() {
      this.addForm.optionList.push({
        name: '',
        seq: ''
      })
    },
    // t弹窗删除属性选项
    handleCloseList(index) {
      this.addForm.optionList.splice(index, 1)
    },
    async getOneCatList() {
      await getTwoCat().then((res) => {
        const { success, data } = res
        if (success) {
          this.getOneCat = data
        }
      })
    },
    reset() {
      this.addForm = {
        categoryId: '',
        styleName: '',
        storeId: '',
        seq: '',
        optionList: [{
          name: '',
          seq: ''
        }]
      }
    }
  },
  mounted() {
    this.getOneCatList()
  }
}
</script>
